<template>
  <view
    class="custom-navBar"
    :style="{
      background: headerBackgroundColor,
    }"
    v-if="isShowHeader"
  >
    <view class="custom-navBar-status" :style="{ height: navStatusHeight }">
    </view>
    <view class="custom-navBar-nav" :style="{ height: navHeight }">
      <div
        v-if="isShowleftIcon"
        class="custom-navBar-nav-leftIcon"
        style="width: 44px; height: 44px"
        @tap="handlerCustomBack"
      >
        <up-icon name="arrow-left" color="#111111" size="22"></up-icon>
      </div>
      <view class="custom-navBar-nav-title">{{ title }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
  /**
   * 页面标题
   */
  title: {
    type: String,
    default: "",
  },
  /**
   * 回退的路由
   *   一般情况下，都是回退到上级页面
   *   当需要自定义时，会清空路由栈
   */
  backRoute: {
    type: String,
    default: "",
  },
  /**
   * 是否隐藏 header
   */
  isShowHeader: {
    type: Boolean,
    default: true,
  },
  headerBackgroundColor: {
    type: String || null,
    default: "#ffffff",
  },
  /**
   * 是否显示回退按钮的icon
   */
  isShowleftIcon: {
    type: Boolean,
    default: true,
  },
  isSelfHandleBackAction: {
    type: Boolean,
    default: false,
  },
});

const navStatusHeight = computed(() => {
  let e = uni.getSystemInfoSync();
  return `${e.statusBarHeight}px`;
});
const navHeight = computed(() => {
  return `44px`;
});

const handlerCustomBack = () => {
  if (props.isSelfHandleBackAction) {
    emit("navigateBack");
    return;
  }
  const pages = getCurrentPages(); // 当前页面
  const len = pages.length;
  if (len === 1) {
    /**
     * 如果当前只存在一个页面 则还需要判断
     *   当前此页面是否就是在 switchTab 的页面如果是则点击头部不做任何处理
     */
    if (!props.isShowleftIcon) return;
    uni.switchTab({
      url: "/pages/index/index",
    });
    return;
  }
  // 自定义回退页面
  if (props.backRoute) {
    uni.reLaunch({
      url: props.backRoute,
    });
    return;
  }
  uni.navigateBack();
};
const emit = defineEmits(["navigateBack"]);
</script>

<style lang="scss" scoped>
.custom-navBar {
  background: #fff;
  z-index: 99;
  &-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    &-leftIcon {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &-img {
        width: 19px;
        height: 30px;
      }
    }
    &-title {
      position: absolute;
      left: calc((100% - 200px) / 2);
      width: 200px;
      text-align: center;
      font-size: 36rpx;
      font-weight: 500;
      font-weight: 500;
    }
  }
}
</style>
